<template>
    <div class="common-box" v-if="boxIsShow">
        <div class="common-content-box">
            <div class="common-content-top-box">
                <div class="form_box">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="金额" prop="money">
                            <el-input type="number" v-model="ruleForm.money"></el-input>
                        </el-form-item>
                        <el-form-item label="数量" prop="num">
                            <el-input type="number" v-model="ruleForm.num"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')">生成兑换码</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="common-content-bottom-box">
                <div class="table_search_box">
                    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                        <el-form-item label="兑换码">
                          <el-input v-model="searchForm.searchCode" placeholder="请输入" size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="使用状态">
                            <el-select v-model="searchForm.codeState" placeholder="请选择" size="small">
                                <el-option key="1" label="未使用" value="1"></el-option>
                                <el-option key="2" label="已使用" value="2"></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="兑换人">
                            <el-input v-model="searchForm.useName" placeholder="请输入" size="small"></el-input>
                          </el-form-item>
                        <el-form-item>
                          <el-button type="primary" @click="search" size="small">查询</el-button>
                          <el-button type="primary" @click="initsearch" size="small" plain>清空</el-button>
                          <el-button type="danger" @click="batchDel" size="small">批量删除</el-button>
                          <el-button type="warning" @click="batchToExcel" size="small" plain>一键导出</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="table_box">
                    <el-table
                        ref="multipleTable"
                        :data="tableData"
                        stripe
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                        <el-table-column
                        type="selection"
                        width="55"
                        align="center">
                        </el-table-column>
                        <el-table-column
                        prop="code"
                        label="兑换码"
                        width="280"
                        align="center">
                        </el-table-column>
                        <el-table-column
                        prop="money"
                        label="金额"
                        width="120"
                        align="center">
                        </el-table-column>
                        <el-table-column
                        label="状态"
                        align="center"
                        width="120">
                        <template slot-scope="scope">
                            {{ scope.row.state===1?'未使用':'已使用' }}
                        </template>
                        </el-table-column>
                        <el-table-column
                        label="兑换人"
                        prop="useName"
                        align="center"
                        width="180">
                        </el-table-column>
                        <el-table-column
                        prop="useTellphone"
                        label="手机号"
                        width="180"
                        align="center">
                        </el-table-column>
                        <el-table-column
                        prop="useTime"
                        label="兑换时间"
                        width="200"
                        align="center">
                        </el-table-column>
                        <el-table-column
                        label="操作"
                        align="center">
                        <template slot-scope="scope">
                            <el-button @click="del(scope.row.id)" type="danger" size="medium">删除</el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                    <pagination
                    :total="total"
                    :limit="pageSize"
                    :page="pageNumber"
                    :pageSize="pageSize"
                    @pageChange="pageChange"
                    ></pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Pagination from "@/components/pagination.vue";
export default {
    components: {
        Pagination
    },
  data() {
    return {
        boxIsShow:false,
        ruleForm: {
            money: '',
            num: ''
        },
        rules: {
            money: [
                { required: true, message: '请输入金额', trigger: ["blur,change"] }
            ],
            num: [
                { required: true, message: '请输入数量', trigger: ["blur,change"] }
            ]
        },
        searchForm:{
            searchCode:"",
            codeState:"",
            useName:""
        },
        total: 0,
        pageSize: 30,
        pageNumber: 1,
        tableData:[],
        selectIds:''

    };
  },
  created() {
    
  },
  mounted(){
  },
  methods: {
    __init() {
      this.getDataList();
    },
    getDataList(){
      var url="manager/getRedemptionCodeListByPage";
      var params={
        ...this.searchForm,
        pageSize: this.pageSize,
        pageNum: this.pageNumber
      }
      this.$post(url, params).then((res) => {
        console.log(res)
        if (res.code === 200) {
            this.tableData=res.data.list;
            this.total=res.data.total;
        } else {
          this.$message.error(res.msg)
        }
      });
    },
    pageChange(e) {
      this.pageNumber = e.page;
      this.getDataList();
    },
    search(){
      this.pageNumber=1;
      this.getDataList();
    },
    initsearch(){
        this.searchForm={
            searchCode:"",
            codeState:"",
            useName:""
        }
        this.pageNumber=1;
        this.getDataList();
    },
    submitForm(formName) {
        if(this.ruleForm.num<=0){
            this.$message.error("生成数量不能小于0")
            return;
        }
        this.$refs[formName].validate((valid) => {
            if (valid) {
                const loading = this.$loading({
                    lock: true,
                    text: '正在生成兑换码，请等待~',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                var url="manager/generateRedemptionCode";
                var params={
                    ...this.ruleForm
                }
                this.$post(url, params).then((res) => {
                    console.log(res)
                    loading.close();
                    if (res.code === 200) {
                        this.$message.success('操作成功')
                        this.getDataList();
                        this.resetForm('ruleForm');
                    } else {
                        this.$message.error(res.msg)
                    }
                });
            } else {
                console.log('error submit!!');
                return false;
            }
        });
    },
    resetForm(formName) {
        this.$refs[formName].resetFields();
        this.ruleForm.youxiaoDays=9999;
        this.ruleForm.level=1;
        this.ruleForm.id=0;
    },
    del(id){
        this.$confirm('此操作将永久删除该选项, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            var url="manager/delChargeInfoById";
            var params={
                id:id
            }
            this.$post(url, params).then((res) => {
                if (res.code === 200) {
                    this.$message.success('删除成功')
                    this.getDataList();
                } else {
                    this.$message.error(res.msg)
                }
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    getDesc(id){
        var url="manager/getChargeInfoDesc";
        var params={
            id:id
        }
        this.$post(url, params).then((res) => {
            if (res.code === 200) {
                var dataDesc=res.data;
                this.ruleForm={
                    id:dataDesc.id,
                    money: dataDesc.money,
                    point: dataDesc.point,
                    level: dataDesc.level,
                    youxiaoDays: dataDesc.youxiaoDays
                }
            } else {
                this.$message.error(res.msg)
            }
        });
    },
    updateState(id,state){
        if(state==1){
        state=2
      }else{
        state=1
      }
      this.$confirm('是否修改此选项状态?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            var url="manager/updateChargeInfoState";
            var params={
                id:id,
                state:state
            }
            this.$post(url, params).then((res) => {
                if (res.code === 200) {
                    this.$message.success('操作完成');
                    this.getDataList();
                } else {
                    this.$message.error(res.msg)
                }
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
    },
    handleSelectionChange(selection){
        const ids = selection.map(row => row.id);
        this.selectIds=ids;
    },
    batchDel(){
        if(this.selectIds.length<=0){
            this.$message.error("请先选择要删除的兑换码");
            return;
        }
        this.del(this.selectIds.join(','));
    },
    del(id){
        this.$confirm('是否删除此兑换码，如未兑换则失效，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            var url="manager/batchDeleteRedemptionCode";
            var params={
                ids:id
            }
            this.$post(url, params).then((res) => {
                if (res.code === 200) {
                    this.$message.success('操作完成');
                    this.getDataList();
                } else {
                    this.$message.error(res.msg)
                }
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
    },
    batchToExcel() {
        if (this.selectIds.length <= 0) {
            this.$message.error("请先选择要导出的兑换码");
            return;
        }
        this.$confirm('导出未使用的兑换码，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            var url="manager/batchRedemptionCodeToExcel";
            var params={
                ids:this.selectIds.join(',')
            }
            this.$post(url, params).then((res) => {
                if (res.code === 200) {
                    this.$message.success("导出成功");
                    this.$refs.multipleTable.clearSelection();
                    window.open(res.data);
                } else {
                    this.$message.error(res.msg)
                }
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
    }
  }
}
</script>
<style scoped lang="scss">
  .common-box{
    background-color: #f9f9fb;
    height: 100%;
    position: relative;
  }
  .common-content-box{
    height: 95%;
    margin-top: 2%;
    width: 96%;
    display: inline-block;
  }
  .common-content-top-box{
    width: 100%;
    background-color: #fff;
    min-height: 200px;
    box-shadow: 1px 1px 6px 2px rgba(0,0,0,0.1);
    border-radius: 5px;
    text-align: left;
  }
  .form_box{
    margin-left: 20px;
    margin-top: 25px;
    width: 40%;
    display: inline-block;
  }
  .common-content-bottom-box{
    width: 100%;
    background-color: #fff;
    min-height: 200px;
    box-shadow: 1px 1px 6px 2px rgba(0,0,0,0.1);
    border-radius: 5px;
    margin-top: 30px;
    padding: 20px 0;
  }
  .table_search_box{
    text-align: left;
    width: 96%;
    margin-left: 2%;
    display: inline-block;
    margin-top: 20px;
  }
  .table_box{
    width: 96%;
    margin-left: 2%;
    height: calc(100% - 255px);
  }
</style>